<template>
  <div class="tabs-container">
    <div v-for="(item, index) in list" :key="index" class="row_tabs">
      <div
        v-for="(item_i, index) in item"
        :key="index"
        :class="{ active: item_i.key == default_active, tabs_item: true }"
        :style="{ width: 100 / (column + 0.5) + '%' }"
        @click="tabs_click(item_i)"
      >
        <div class="tabs_item_img" v-if="item_i.url">
          <el-image
            style="width: 100px; height: 100px"
            :src="url"
            fit="cover"
          ></el-image>
        </div>
        <div class="tabs_item_text">
          <p class="tabs_item_name">{{ item_i.name }}</p>
          <p class="tabs_item_count">{{ item_i.count }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data() {
    return {
      default_active: null,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    }
  },
  props: {
    list: {
      type: Array,
      required: true,
    },
    column: {
      type: Number,
      required: true,
    },
    active: {
      type: [String, Number],
      required: true,
    },
  },
  created() {
    this.default_active = this.active
  },
  methods: {
    tabs_click(item) {
      this.default_active = item.key
      this.$emit('tabs_click', item.key)
    },
  },
}
</script>
<style scoped lang="scss">
.tabs-container {
  .row_tabs {
    vertical-align: middle;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
    .tabs_item {
      text-align: center;
      // color:rgb(154,158,203);
      border: 1px solid #e2e7eb;
      margin-right: 12px;
      border-radius: 4px;
      color: #333333;
      box-shadow: 0px 0px 10px #eee;
      .tabs_item_img {
        display: inline-block;
        vertical-align: middle;
      }
      .tabs_item_text {
        display: flex;
        vertical-align: middle;
        display: inline-block;
        text-align: center;
        .tabs_item_name {
          font-weight: 700;
          font-size: 16px;
          margin: 8px 0 4px 0;
        }
        .tabs_item_count {
          margin: 4px 0 8px 0;
          font-weight: 700;
          font-size: 22px;
        }
      }
    }
    .tabs_item:hover {
      cursor: pointer;
      box-shadow: 0px 0px 10px #ccc;
    }
    .tabs_item:last-child {
      margin-right: 0px;
    }
    .active {
      color: #1b3194;
      border: 1px solid #2251c5;
    }
  }
  .row_tabs:last-child {
    margin-bottom: 0px;
  }
}
</style>

